<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        }
        #app{
            width: 100%;
            height:100vh;
            position: relative;
            overflow: hidden;
            background-image: url('../image/backgourd.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-color: rgba(0, 177, 245,.1);
        }
        
        .form-signin {
            width: 90%;
            padding: 15px;
            background-color: #fff;
            border-radius: 10px;
            margin: 20% auto;
            border: 1px solid #385723;
        }
        .company{
            text-align: center;
            width: 100%;
            color: #fff;
            position: absolute;
            bottom: 6.5vh;
        }
        .loginfooter{
            height: 6vh;
            width:100%;
            padding: 5px;
            z-index: 99;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #00B1F5;
            color: #fff;
        }
        .loginfooter .logo{
            width: 120px;
            height: 4vh;
            background: url('../image/hhlogo.png') center center no-repeat;
            background-size: contain;
            background-position: center;
        }
        
        .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            border: none !important;
            padding: 10px 5px 10px 25px !important;
            font-size: 14px !important;
        }
        .form-signin .form-control:focus {
            z-index: 2;
        }
        .form-control-theme{
            border: none !important;
            border-bottom: none !important;
        }

        .sr-only2 {
            margin-top: 15px;
        }



        .logodiv {
            text-align: center;
            color: #00B1F5;
        }

        .logodiv h1 {
            font-size: 1.4rem;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .logodiv h2 {
            font-size: 1.2rem;
            font-weight: bold;
        }
        .form-input{
            position: relative;
            margin-bottom: 10px;
            border: 1px solid #D0D3D8;
            border-radius: 4px;
            padding: 5px 0;
        }
      
        .sr-only1{
            position: absolute;
            display: inline-block;
            padding: 0 10px 0 5px;
            background-color: #fff;
            font-size: 14px;
            top: -10px;
            z-index: 10;
            left: 5px;
        }
        .fgtpaws {
            text-align: center;
            margin-top: 10px;
        }
        .action-row{
            margin-top: 1rem !important;
        }
    </style>
</head>

<body>
    <div id="app">
       
        <div class="form-signin form-group1 ">
            <div class="logodiv">
                <h1>ACC</h1>
                <h2>{{lan['Mobile_Warehouse']}}</h2>

            </div>
            <div class="form-input">
                <label class="sr-only1">{{lan['Username']}}</label>
                <input type="text" v-model="searchdata.username" id="username" onblur="loadCompany()" class="form-control form-control-theme"
                    :placeholder="lan['Username_placeholder']" id="inputPassword">
                
            </div>

            <div  class="form-input">
                <label class="sr-only1">{{lan['Password']}}</label>
                <div class="input-group">
                  <input type="password" id="password" v-model="searchdata.password" onblur="loadCompany()" class="form-control form-control-theme"
                    :placeholder="lan['Password_placeholder']" id="inputPassword">
                  <div class="input-group-append">
                    <span class="input-group-text" id="passwordToggle" onclick="togglePasswordVisibility()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash-fill" viewBox="0 0 16 16">
                            <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                            <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
                        </svg>
                    </span>
                  </div>
                </div>
            
            </div>
            <div  class="form-input">
                <label class="sr-only1">{{lan['Company']}}</label>
                <select id="post-content"  v-model="searchdata.company" @change="siteChange" class="form-select form-control-theme form-control"
                    :placeholder="lan['Company_placeholder']" aria-label="Please select company">
                    <option v-for="(item,index) in companyList" :key="index" 
                    :value="item.Company1" :data-name="item.Name">{{item.Name}}</option>
                </select>
            </div>

            <div  class="form-input">
                <label class="sr-only1">{{lan['Site']}}</label>
                <select id="site-content"  v-model="searchdata.site" class="form-select form-control-theme form-control"
                    :placeholder="lan['Site_placeholder']" aria-label="Please select site">
                    <option v-for="(item,index) in siteList" :key="index" 
                    :value="item.Plant" :data-name="item.Name">{{item.Name}}</option>
                </select>
            </div>

            <div class="form-group row action-row">
                <div class="col-4 offset-1">
                    <button type="button" tapmode="" onclick="user_login();"
                        class="btn btn-primary btn-action">{{lan['Loging']}}</button>
                </div>
                <div class="col-4 offset-2">
                    <button type="button" tapmode="" onclick="closeWin();"
                        class="btn btn-primary btn-action">{{lan['Cancel']}}</button>
                </div>
            </div>

        </div>
        <div class="company">Action Consultancy Company Ltd.</div>
        <div class="loginfooter">
            <div class="setting" @click="setClick">{{lan['Setting']}}</div>
            <div class="logo"></div>
            <div class="version">Version {{appVersion}}</div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../script/lang.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript" src="../script/base64.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

    
    var first_load = 1;
    var dcmo = {};
    apiready = function () {
        api.parseTapmode();
        app.appVersion = api.appVersion;
        console.log('当前应用程序版本号为：' + app.appVersion);
        //getlan();
        api.addEventListener({ name: 'navitembtn' }, function (ret, err) {
            if (ret.type == 'left') { api.closeWin({}); }
            if (ret.type == 'right') {
                var data = {};
                data.title = '';
                data.frame = 'changeapi';

                openNavWin2(data.frame, data);
            }
        });
    }

    const app = new Vue({
        el: '#app',
        data: {
            print_num: '',
            appVersion:'',
            LicQty:"",
            searchdata:{
                username:"",
                password:"",
                company:"",
                site:"",
            },
            companyList:[],
            siteList:[]

        },
        mounted() {

        },
        methods: {
            setClick(){
                var data = {};
                data.title = '';
                data.frame = 'changeapi';

                openNavWin2(data.frame, data);
            },
            siteChange(){
                loadSite()
            }
        }
    });
    function togglePasswordVisibility() {
        var passwordInput = document.getElementById("password");
        var passwordToggle = document.getElementById("passwordToggle");
        
        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            passwordToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>';
        } else {
            passwordInput.type = "password";
            passwordToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash-fill" viewBox="0 0 16 16"><path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/><path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/></svg>';
        }
    }

    function loadCompany() {
        server = getapi();
        var username =app.searchdata.username;
        var password =app.searchdata.password;
        console.log(username,11111)
        console.log(password,22222)
        if (!username || !password) {
            return;
        }
        app.companyList = []
        var textz = username + ":" + password;
        var token = 'Basic ' + Base64.encode(textz);
        api.ajax({
            url: server + 'Erp.BO.CompanySvc/Companies',
            method: 'get',
            returnAll: false,
            headers: {
                'Authorization': token,
            },
            data: {
                values: {
                    '$select': 'Company1,Name',
                }
            }
        }, function (ret, err) {
            console_debug(ret, err);
            console.log(JSON.stringify(ret),33333)
            if (ret && ret.value.length) {
                app.companyList = app.companyList.concat(ret.value)
                
            } else {
                api.toast({
                    msg: lan['Username_Or_Password_Error'],
                    location: 'middle'
                });
            }

        });
    }
    function loadSite() {
        server = getapi();
        var username =app.searchdata.username;
        var password = app.searchdata.password;
        var company =app.searchdata.company;
        if (!username || !password || !company) {
            return;
        }
        app.siteList = []
        var textz = username + ":" + password;
        var token = 'Basic ' + Base64.encode(textz);
        api.ajax({
            url: server + 'Erp.BO.PlantSvc/List',
            method: 'get',
            returnAll: false,
            headers: {
                'Authorization': token,
            },
            data: {
                values: {
                    '$select': 'Company,Plant,Name',
                    '$filter': "Company eq '" + company + "'",
                }
            }
        }, function (ret, err) {
            console_debug(ret, err);
            console.log(JSON.stringify(ret),111111)
            if (ret &&ret.value.length > 0) {
                app.siteList = app.siteList.concat(ret.value)
                if(first_load){
                    first_load = 0;
                }
            }else{
                api.toast({
                    msg: 'Site acquisition failed',
                    location: 'middle'
                });  output_html
            }

        });
    }


    function user_login() {
        server = getapi();
        var username = app.searchdata.username
        var password =app.searchdata.password
        var company =app.searchdata.company
        var site = app.searchdata.site
        if (username == '') {
            api.toast({
                msg: lan['Username_check'],
                location: 'middle'
            });
            return false;
        }
        if (password == '') {
            api.toast({
                msg: lan['Password_check'],
                location: 'middle'
            });
            return false;
        }

        if (!company) {
            api.toast({
                msg: lan['Company_check'],
                location: 'middle'
            });
            return false;
        }
        if (!site) {
            api.toast({
                msg: lan['Site_check'],
                location: 'middle'
            });
            return false;
        }
        var companyName = $('#post-content option:selected').attr("data-name");
        let datas = {
            CompanyID: company,
            PlantID: site,
            UserName: username,
            Password: password,
        }
        user_Permissions_LicQty(datas, function(ret) {
            if (ret) {
                app.LicQty = ret.data.LicQty;
                if (ajaxing) {
                    return;
                }
                console.log(JSON.stringify(api.deviceId), 44444)
                console.log(JSON.stringify(app.LicQty), 55555)
                if (app.LicQty) {
                    let data = {
                        DeviceID: api.deviceId,
                        LicQty: app.LicQty,
                    }
                    LoginIn_Usergetlic(data, function(ret) {
                        if (ret == 200) {
                            ajaxing = 1;
                            var textz = username + ":" + password;
                            var token = 'Basic ' + Base64.encode(textz);
                            var param = {};
                            param.Token = token;
                            param.Name = username;
                            param.Company = company;
                            param.CompanyName = companyName;
                            param.password = password;
                            param.Site = site;
                            api.ajax({
                                url: server + 'Erp.BO.PlantSvc/List',
                                method: 'get',
                                returnAll: false,
                                headers: {
                                    'Authorization': token,
                                },
                                data: {
                                    values: {
                                        '$select': 'Company,Plant,Name',
                                        '$filter': "Company eq '" + company + "'" + "and Plant eq '" + site + "'",
                                    }
                                }
                            }, function(ret, err) {
                                console_debug(ret, err);
                                if (ret) {
                                    param.SiteName = ret.value[0].Name;
                                    api.setPrefs({
                                        key: 'userinfo',
                                        value: param
                                    });
                                }

                            });
                            api.sendEvent({
                                name: 'userinfo_update',
                                extra: 'update'
                            });
                            api.alert({
                                title: lan['Tips'],
                                msg: lan['Login_successful']
                            }, function(ret, err) {
                                var index = ret.buttonIndex;
                                api.closeWin({});
                            });
                        } else {
                            api.alert({
                                title: lan['Tips'],
                                msg: lan['User_Excess']
                            });
                        }
                    })

                }
            }
        });

    }
    function user_Permissions_LicQty(data, callback) {  
        var data1 = {
            "CompanyID": data.CompanyID,
            "PlantID": data.PlantID,
            "UserName": data.UserName,
            "Password": data.Password,
            "Data": "",
        };
        api.ajax({
            url: wmsserver + 'getlicenceinfo/',
            method: 'post',
            returnAll: false,
            headers: {
                'token': wmstoken,
                'Content-Type': 'application/json;charset=utf-8'
            },
            data: {
                body: get_submit_data(data1)
            }
        }, function(ret, err) {
            if (ret && ret.code == 1) {
                callback(ret);
            }else{

                api.toast({
                    msg: lan['Blocking_prompt_placeholder'],
                    location: 'middle'
                });
                return false;
            }
        });
    }   

</script>

</html>